import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import styles from './index.module.scss'
import { getEdu, getExamCorrect, getRole, getTechStack } from '@/util/request'

// 管理员首页
export default function SuperAdminHome() {
  const studentTeacherRef = useRef(null)
  const examPaperRef = useRef(null)
  const techStackRef = useRef(null)
  const educationRef = useRef(null)

  // 获取各个用户的数量
  const getRoleAsync = async () => {
    const res: any = await getRole()
    // 学生和老师数量
    const studentTeacherChart = echarts.init(studentTeacherRef.current)
    const studentTeacherOption = {
      title: {
        text: '各用户数量'
      },
      tooltip: {},
      xAxis: {
        data: ['学生', '老师', '超级管理员']
      },
      yAxis: {},
      series: [
        {
          name: '数量',
          type: 'bar',
          data: [res.data.student, res.data.teacher, res.data.super_admin]
        }
      ]
    }
    studentTeacherChart.setOption(studentTeacherOption)
  }

  // 获取各个教育水平的数量
  const getEduAsync = async () => {
    const res: any = await getEdu()

    // 学历分布
    const educationChart = echarts.init(educationRef.current)
    const educationOption = {
      title: {
        text: '学历分布'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '人数',
          type: 'pie',
          radius: '50%',
          data: [
            { value: res.data.junior_high_school, name: '初中' },
            { value: res.data.senior_high_school, name: '高中' },
            { value: res.data.junior_college, name: '大专' },
            { value: res.data.adult_undergraduate, name: '成人本科' },
            { value: res.data.junior_college_to_undergraduate, name: '专升本' },
            { value: res.data.second_tier_undergraduate, name: '二本' },
            { value: res.data.first_tier_undergraduate, name: '一本' },
            { value: res.data.postgraduate, name: '研究生' }
          ]
        }
      ]
    }
    educationChart.setOption(educationOption)
  }

  // 获取各个技术栈的数量
  const getTechStackAsync = async () => {
    const res: any = await getTechStack()

    // 技术栈使用人数
    const techStackChart = echarts.init(techStackRef.current)
    const techStackOption = {
      title: {
        text: '各职位数量'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '人数',
          type: 'pie',
          radius: '50%',
          data: res.data
        }
      ]
    }
    techStackChart.setOption(techStackOption)
  }

  // 获取试卷是否被批阅的数量
  const getExamCorrectAsync = async () => {
    const res: any = await getExamCorrect()

    // 试卷批改情况
    const examPaperChart = echarts.init(examPaperRef.current)
    const examPaperOption = {
      title: {
        text: '试卷批改情况'
      },
      tooltip: {},
      xAxis: {
        data: ['未批卷', '已批卷']
      },
      yAxis: {},
      series: [
        {
          name: '试卷数量',
          type: 'bar',
          data: [
            {
              value: res.data.correct_false,
              itemStyle: {
                color: '#a90000'
              }
            },
            res.data.correct_true
          ]
        }
      ]
    }
    examPaperChart.setOption(examPaperOption)
  }

  useEffect(() => {
    getRoleAsync()

    getEduAsync()

    getTechStackAsync()

    getExamCorrectAsync()

    return () => {}
  }, [])

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>考试管理系统统计信息展示</h1>
      <div className={styles.chart_container}>
        <div ref={studentTeacherRef} className={styles.chart}></div>
        <div ref={techStackRef} className={styles.chart}></div>
        {/* </div>
      <div className={styles.chart_container}> */}
        <div ref={examPaperRef} className={styles.chart}></div>
        <div ref={educationRef} className={styles.chart}></div>
      </div>
    </div>
  )
}
